<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 时间相关
const currentTime = ref('')
const currentDate = ref('')
const timeInterval = ref(null)

// 天气相关（模拟数据）
const weatherInfo = ref({
  temperature: '25°C',
  condition: '晴朗',
  location: '北京',
  icon: '☀️'
})

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', { 
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
}

// 获取天气信息（模拟）
const getWeatherInfo = () => {
  // 这里可以接入真实的天气API
  const conditions = ['晴朗', '多云', '小雨', '阴天']
  const icons = ['☀️', '☁️', '🌧️', '⛅']
  const randomIndex = Math.floor(Math.random() * conditions.length)
  
  weatherInfo.value = {
    temperature: `${Math.floor(Math.random() * 15) + 20}°C`,
    condition: conditions[randomIndex],
    location: '北京',
    icon: icons[randomIndex]
  }
}

onMounted(() => {
  updateTime()
  getWeatherInfo()
  timeInterval.value = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timeInterval.value) {
    clearInterval(timeInterval.value)
  }
})
</script>

<template>
  <div class="time-weather">
    <div class="time-section">
      <div class="current-time">{{ currentTime }}</div>
      <div class="current-date">{{ currentDate }}</div>
    </div>
    
    <div class="weather-section">
      <div class="weather-icon">{{ weatherInfo.icon }}</div>
      <div class="weather-info">
        <div class="temperature">{{ weatherInfo.temperature }}</div>
        <div class="condition">{{ weatherInfo.condition }} · {{ weatherInfo.location }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.time-weather {
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  z-index: 10;
}

.time-section {
  text-align: right;
}

.current-time {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.5px;
}

.current-date {
  font-size: 1rem;
  opacity: 0.9;
  margin-top: 0.5rem;
  line-height: 1.3;
}

.weather-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.weather-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.weather-info {
  text-align: left;
}

.temperature {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.condition {
  font-size: 0.8rem;
  opacity: 0.8;
  line-height: 1.2;
}

/* 平板设备 (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  .time-weather {
    top: 1.5rem;
    right: 1.5rem;
    gap: 0.8rem;
  }
  
  .current-time {
    font-size: 2.2rem;
  }
  
  .current-date {
    font-size: 0.9rem;
  }
  
  .weather-section {
    padding: 0.4rem 0.8rem;
  }
  
  .weather-icon {
    font-size: 1.3rem;
  }
  
  .temperature {
    font-size: 1.1rem;
  }
  
  .condition {
    font-size: 0.75rem;
  }
}

/* 移动设备 (768px 以下) */
@media (max-width: 768px) {
  .time-weather {
    position: static;
    align-items: center;
    margin-bottom: 2rem;
    gap: 0.8rem;
    width: 100%;
    max-width: 300px;
  }
  
  .time-section {
    text-align: center;
    width: 100%;
  }
  
  .current-time {
    font-size: 2rem;
    letter-spacing: -0.3px;
  }
  
  .current-date {
    font-size: 0.9rem;
    margin-top: 0.3rem;
  }
  
  .weather-section {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
  }
  
  .weather-icon {
    font-size: 1.3rem;
  }
  
  .temperature {
    font-size: 1rem;
  }
  
  .condition {
    font-size: 0.7rem;
  }
}

/* 小屏手机 (480px 以下) */
@media (max-width: 480px) {
  .time-weather {
    margin-bottom: 1.5rem;
    gap: 0.6rem;
    max-width: 100%;
  }
  
  .current-time {
    font-size: 1.8rem;
  }
  
  .current-date {
    font-size: 0.8rem;
  }
  
  .weather-section {
    padding: 0.3rem 0.6rem;
    border-radius: 15px;
  }
  
  .weather-icon {
    font-size: 1.1rem;
  }
  
  .temperature {
    font-size: 0.9rem;
  }
  
  .condition {
    font-size: 0.65rem;
  }
}

/* 横屏手机优化 */
@media (max-height: 500px) and (orientation: landscape) {
  .time-weather {
    position: absolute;
    top: 1rem;
    right: 1rem;
    margin-bottom: 0;
    max-width: none;
    align-items: flex-end;
  }
  
  .time-section {
    text-align: right;
  }
  
  .current-time {
    font-size: 1.6rem;
  }
  
  .current-date {
    font-size: 0.7rem;
  }
  
  .weather-section {
    padding: 0.2rem 0.5rem;
  }
}

/* 超小屏设备 (320px 以下) */
@media (max-width: 320px) {
  .time-weather {
    gap: 0.5rem;
  }
  
  .current-time {
    font-size: 1.5rem;
  }
  
  .current-date {
    font-size: 0.75rem;
  }
  
  .weather-section {
    padding: 0.2rem 0.4rem;
  }
  
  .weather-icon {
    font-size: 1rem;
  }
  
  .temperature {
    font-size: 0.8rem;
  }
  
  .condition {
    font-size: 0.6rem;
  }
}
</style>
